<template>
    <div class="product-nav">
        <div class="product-logo">
            <img
                class="logo-image"
                :src="logourl"
                alt="" />
        </div>
        <div
            class="nav-button"
            @click="showMenus">
            {{ $t('dao-hang-lan') }}
        </div>
        <van-overlay
            z-index="100"
            :lock-scroll="false"
            :show="navstate.showmenu"
            @click="closeMenus">
            <div
                class="side-menu"
                @click.stop>
                <div
                    @click="closeMenus"
                    class="close-btn">
                    <wp-icon
                        name="shut"
                        size="12"/>
                </div>
                <ul>
                    <li
                        v-for="child in menus"
                        :key="child.name">
                        <a
                            :href="child.link"
                            v-if="isFullLink(child.link)">{{ child.name }}</a>
                        <router-link
                            @click="closeMenus"
                            :to="child.link"
                            v-else>{{ child.name }} </router-link>
                    </li>
                </ul>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import {
    reactive
} from '@vue/reactivity';
import {
    computed, onMounted
} from '@vue/runtime-core';
import { useProductSetup } from '@/setup/product/ProductSetup';
// import WpIcon from '@/components/_wp_components/WpIcon.vue';
export default {
    components: {},
    setup () {
        const { productmanual, getProductConfig } = useProductSetup();

        const navstate = reactive({
            showmenu: false
        });

        const showMenus = () => {
            navstate.showmenu = true;
        };

        const closeMenus = () => {
            navstate.showmenu = false;
        };

        const menus = computed(() => {
            const { custommenus, systemmenus } = productmanual.config;

            return systemmenus ? systemmenus.concat(custommenus) : [];
        });

        const isFullLink = (link) => {
            return link.substring(0, 4) === 'http';
        };

        onMounted(() => {
            getProductConfig();
        });

        return {
            navstate,
            menus,
            isFullLink,
            closeMenus,
            showMenus
        };
    },
    computed: {
        logourl () {
            return this.$store.state.content_config.logo1.url;
        }
    }
};

</script>

<style lang="scss" scoped>
    .product-nav {
        background: #000;
        height: 44px;
        position: fixed;
        width: 100%;
        display: flex;
        top: 0;
        z-index: 100;
        align-items: center;
        justify-content: space-between;

        .product-logo {

            .logo-image {
                width: 130px;
                height: 20px;
            }
        }

        .nav-button {
            width: 72px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            border-radius: 15px;
            color: #fff;
            text-align: center;
            margin-right: 10px;
            border: 1px solid rgba(255,255,255,0.40);
            background: transparent;
        }

        .side-menu {
            background: #fff;
            height: 100%;
            width: 70%;
            position: absolute;
            right: 0;
            overflow: auto;
            z-index: 1;
            .close-btn {
                font-size: 16px;
                text-align: right;
                padding: 20px 20px;
            }

            ul {
                padding-bottom: 150px
            }

            li {
                font-size: 16px;
                height: 44px;
                color: #000;
                line-height: 44px;
                padding-left: 30px;

                a {
                    color: #000;
                }
            }
        }
    }

</style>
